<template>
  <view class="container" style="padding: 20rpx">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="onClickBack"
    />
    <!-- #endif -->
    <view style="padding-bottom: 100rpx" v-if="orderData.orderType != 'due'">
      <view class="bg-white">
        <view class="section">
          <!-- store info begin -->
          <list-cell :hover="false" v-if="orderData.orderType != 'desk'">
            <view class="w-100 d-flex align-items-center">
              <view class="d-flex flex-column w-60">
                <view
                  class="w-100 font-size-lg text-color-base text-truncate"
                  >{{ orderData.shop.name }}</view
                >
              </view>
              <view class="d-flex justify-content-end align-items-center w-40">
                <view
                  class="iconfont-yshop icon-mobile"
                  @click="makePhoneCall(orderData.shop)"
                  style="font-size: 45rpx; margin-right: 40rpx"
                ></view>
                <view
                  class="iconfont-yshop icon-location"
                  @click="openLocation(orderData.shop)"
                  style="font-size: 45rpx"
                ></view>
              </view>
            </view>
          </list-cell>
          <!-- store info end -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view
                class="flex justify-between desk-num mb-5"
                v-if="orderData.orderType == 'desk'"
              >
                <view> {{currentLanguageTexts.currentTableNumber}}:{{ orderData.deskNumber }}</view>
                <view>{{currentLanguageTexts.personNum}}:{{ orderData.deskPeople }}</view>
              </view>
              <view
                class="d-flex align-items-center just-content-center"
                v-else
              >
                <view class="sort-num">{{ orderData.numberId }}</view>
              </view>
              <!-- steps begin -->
              <view class="d-flex just-content-center">
                <view class="steps d-flex flex-column w-80">
                  <view class="steps__img-column">
                    <view class="steps__img-column-item">
                      <view class="iconfont-yshop icon-lamp"></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view
                        class="iconfont-yshop icon-daojishi"
                        v-if="{
                          active: orderData.paid == 1 && orderData.status == 0,
                        }"
                      ></view>
                      <view
                        class="iconfont-yshop icon-daojishi unactive"
                        v-else
                      ></view>
                    </view>
                    <view
                      class="steps__img-column-item"
                      v-if="orderData.orderType == 'takeout'"
                    >
                      <view
                        class="iconfont-yshop icon-takeout"
                        v-if="orderData.status == 1"
                      ></view>
                      <view
                        class="iconfont-yshop icon-takeout unactive"
                        v-else
                      ></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view
                        class="iconfont-yshop icon-doorbell"
                        v-if="orderData.status >= 2"
                      ></view>
                      <view
                        class="iconfont-yshop icon-doorbell unactive"
                        v-else
                      ></view>
                    </view>
                  </view>
                  <view class="steps__text-column">
                    <view class="steps__text-column-item active">
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                      <view class="steps__text-column-item-text">{{currentLanguageTexts.ordered}}</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item activ"
                      :class="{ active: orderData.paid == 1 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">{{currentLanguageTexts.inproduction}}</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item"
                      :class="{ active: orderData.status == 1 }"
                      v-if="orderData.orderType == 'takeout'"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">{{currentLanguageTexts.Deliveryprogress}}</view>
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                    </view>
                    <view
                      class="steps__text-column-item"
                      :class="{ active: orderData.status >= 2 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view
                        class="steps__text-column-item-text"
                        v-if="orderData.orderType == 'desk'"
                      >
                        {{currentLanguageTexts.Pleasedine}}
                      </view>
                      <view class="steps__text-column-item-text" v-else>
                        {{
                          orderData.orderType == 'takeout' ? currentLanguageTexts.Delivered : currentLanguageTexts.Pleaseyourmeal
                        }}
                      </view>
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                    </view>
                  </view>
                </view>
              </view>
              <!-- steps end -->
              <view
                v-if="orderData.status == 0 && orderData.paid > 0"
                class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40"
              >
                您前面还有
                <text class="text-color-primary mr-10 ml-10">{{
                  orderData.preNum
                }}</text>
                单待制作
              </view>
              <!-- goods begin -->
              <view
                class="w-100 d-flex flex-column position-relative mt-30"
                style="margin-bottom: -40rpx"
              >
                <view
                  class="w-100 d-flex align-items-center mb-40"
                  v-for="(good, index) in orderData.products"
                  :key="index"
                >
                  <view class="d-flex flex-column w-60 overflow-hidden">
                    <view
                      class="font-size-lg text-color-base mb-10 text-truncate"
                      >{{ good.title }}</view
                    >
                    <view
                      class="font-size-sm text-color-assist text-truncate"
                      >{{ good.spec }}</view
                    >
                  </view>
                  <view
                    class="d-flex w-40 align-items-center justify-content-between pl-30"
                  >
                    <view class="font-size-base text-color-base"
                      >x{{ good.number }}</view
                    >
                    <view
                      class="font-size-base text-color-base font-weight-bold"
                      >${{ good.price }}</view
                    >
                  </view>
                </view>
              </view>
              <!-- goods end -->
            </view>
          </list-cell>
        </view>
        <view class="section">
          <!-- goods begin -->
          <list-cell :hover="false" padding="10rpx 10rpx">
            <view class="w-100 d-flex flex-column position-relative">
              <view
                class="font-weight-bold mb-5"
                v-if="orderData.orderType == 'desk'"
                >{{ orderData.shop.name }}</view
              >
              <view class="cart-popup" v-if="orderData.appDeskOrderVo">
                <scroll-view class="cart-list" scroll-y>
                  <view class="wrapper2">
                    <view
                      class="item"
                      style="
                        background: linear-gradient(
                          to bottom,
                          #e9f1ee,
                          #fcfcf4
                        );
                        padding: 10rpx 30rpx;
                        margin: 15rpx 0;
                        border-radius: 20rpx;
                      "
                      v-for="(item, index) in orderData.appDeskOrderVo"
                      :key="index"
                    >
                      <view class="flex align-center">
                        <view><uv-avatar :src="item.uavatar"></uv-avatar></view>
                        <view
                          class="flex flex-1 justify-between font-size-sm text-color-assist"
                        >
                          <view class="flex flex-column ml-2">
                            <text>{{ item.unickname }}</text>
                            <text>{{ formatDateTime(item.addTime) }}</text>
                          </view>
                          <view v-if="isMer == 1">
                            <text style="color: #9acafc; font-weight: bold">{{
                              item.uidType == 'user' ? currentLanguageTexts.userOrdering : currentLanguageTexts.employeeHelp
                            }}</text>
                            <text style="color: #5ac725"
                              >({{
                                item.isOrder == 0 ? currentLanguageTexts.notYetServed : currentLanguageTexts.yetServed
                              }})</text
                            >
                          </view>
                        </view>
                      </view>
                      <uv-divider :hairline="false" text=""></uv-divider>
                      <view
                        class="flex align-center"
                        v-for="(good, index2) in item.appDeskOrderGoodsVos"
                        :key="index2"
                      >
                        <view
                          ><image
                            :src="good.image"
                            style="width: 100rpx; height: 100rpx"
                          ></image
                        ></view>
                        <view class="flex flex-1 flex-column ml-2 font-size-sm">
                          <view class="flex justify-between"
                            ><text class="font-weight-bolder">{{
                              good.title
                            }}</text
                            ><text style="color: #f56c6c">{{
                              good.spec
                            }}</text></view
                          >
                          <view class="flex justify-between mt-1"
                            ><text>${{ good.price }}</text
                            ><text>x{{ good.number }}</text></view
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
              <view v-else>
                <view
                  class="w-100 d-flex align-items-center mb-40"
                  v-for="(good, index) in orderData.cartInfo"
                  :key="index"
                >
                  <image
                    :src="good.image"
                    mode="aspectFill"
                    class="image"
                  ></image>
                  <view class="d-flex flex-column w-60 overflow-hidden">
                    <view
                      class="font-size-lg text-color-base mb-10 text-truncate"
                      >{{ good.title }}</view
                    >
                    <view
                      class="font-size-sm text-color-assist text-truncate"
                      >{{ good.spec }}</view
                    >
                  </view>
                  <view
                    class="d-flex w-40 align-items-center justify-content-between pl-30"
                  >
                    <view class="font-size-base text-color-base"
                      >x{{ good.number }}</view
                    >
                    <view
                      class="font-size-base text-color-base font-weight-bold"
                      >${{ good.price }}</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </list-cell>
          <!-- goods end -->
          <!-- payment and amount begin -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>{{currentLanguageTexts.payWay}}</view>
                <view class="font-weight-bold">{{
                  orderData.statusDto.payType
                }}</view>
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.orderAmount}}</view>
                <view class="font-weight-bold"
                  >${{ orderData.totalPrice }}</view
                >
              </view>
              <view class="pay-cell" v-if="orderData.orderType == 'takeout'">
                <view>{{currentLanguageTexts.deliveryFee}}</view>
                <view class="font-weight-bold"
                  >${{ orderData.payPostage }}</view
                >
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.discountAmount}}</view>
                <view class="font-weight-bold"
                  >-${{ orderData.couponPrice }}</view
                >
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.discountMoney}}</view>
                <view class="font-weight-bold"
                  >-${{ orderData.deductionPrice }}</view
                >
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.payAmount}}</view>
                <view class="font-weight-bold">${{ orderData.payPrice }}</view>
              </view>
            </view>
          </list-cell>
          <!-- payment and amount end -->
        </view>
        <view class="section">
          <!-- order info begin -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>{{currentLanguageTexts.orderTime}}</view>
                <view class="font-weight-bold">{{
                  formatDateTime(orderData.createTime)
                }}</view>
              </view>
              <!-- 	<view class="pay-cell">
								<view>下单门店</view>
								<view class="font-weight-bold">{{ order.shop.name }}</view>
							</view> -->
              <view class="pay-cell">
                <view>{{currentLanguageTexts.orderNo}}</view>
                <view class="font-weight-bold">{{ orderData.orderId }}</view>
              </view>
            </view>
          </list-cell>
          <!-- order info end -->
        </view>
        <!-- order other info begin -->
        <list-cell
          :hover="false"
          padding="50rpx 30rpx 20rpx"
          last
          v-if="orderData.orderType != 'desk'"
        >
          <view class="w-100 d-flex flex-column">
            <view class="pay-cell">
              <view>{{currentLanguageTexts.enjoymentMethod}}</view>
              <view class="font-weight-bold">{{
                orderData.orderType == 'takein' ? currentLanguageTexts.takein : currentLanguageTexts.takeout
              }}</view>
            </view>
            <view class="pay-cell">
              <view>{{currentLanguageTexts.pickupTime}}</view>
              <view class="font-weight-bold">{{
                orderData.getTime
                  ? formatDateTime(orderData.getTime)
                  : currentLanguageTexts.mealImmediately
              }}</view>
            </view>
            <view class="pay-cell">
              <view>{{currentLanguageTexts.completionTime}}</view>
              <view class="font-weight-bold">{{
                orderData.deliveryTime
                  ? formatDateTime(orderData.deliveryTime)
                  : currentLanguageTexts.noData
              }}</view>
            </view>
            <view class="pay-cell">
              <view>{{currentLanguageTexts.notes}}</view>
              <view class="font-weight-bold">{{
                orderData.remark ? orderData.remark : currentLanguageTexts.noData
              }}</view>
            </view>
          </view>
        </list-cell>
        <!-- order other info end -->
      </view>
      <view class="fixed-bottom bg-white p-3">
        <view
          v-if="orderData.paid > 0 && orderData.refundStatus == 0"
          class="flex justify-end"
        >
          <view class="mr-1"
            ><uv-button
              type="success"
              v-if="orderData.status < 2"
              :plain="true"
              size="small"
              :text="currentLanguageTexts.confirmReceipt"
              @click="receive(orderData)"
            ></uv-button
          ></view>
          <view
            ><uv-button
              type="error"
              :plain="true"
              size="small"
              :text="currentLanguageTexts.requestRefund"
              @click="refund(orderData)"
            ></uv-button
          ></view>
        </view>
        <view
          v-if="orderData.paid == 0 && orderData.orderType == 'desk'"
          class="flex justify-end"
        >
          <view class="mr-1"
            ><uv-button
              type="info"
              :text="currentLanguageTexts.goMeal"
              @click="addFood(orderData)"
            ></uv-button
          ></view>
          <view v-if="isMer == 1"
            ><uv-button
              color="#09b4f1"
              :text="currentLanguageTexts.paymentReceipt"
              @click="offPayOrder(orderData)"
            ></uv-button
          ></view>
          <view v-else
            ><uv-button
              color="#09b4f1"
              :text="currentLanguageTexts.payBill"
              @click="goPay()"
            ></uv-button
          ></view>
        </view>
        <view
          v-if="orderData.paid == 0 && orderData.orderType != 'desk'"
          class="flex justify-end"
        >
          <view
            ><uv-button
              type="warning"
              :text="currentLanguageTexts.immediatePayment"
              @click="goPay()"
            ></uv-button
          ></view>
        </view>
      </view>
      <uv-popup
        ref="popup"
        mode="bottom"
        zIndex="9999"
        custom-style="height: 400rpx;"
      >
        <view class="content">
          <view class="payment">
            <list-cell last :hover="false"><text>{{currentLanguageTexts.payWay}}</text></list-cell>
            <list-cell>
              <view
                class="d-flex align-items-center justify-content-between w-100 disabled"
                @click="setPayType('yue')"
              >
                <view
                  class="iconfont iconbalance line-height-100 payment-icon"
                ></view>
                <view class="flex-fill"
                  >{{currentLanguageTexts.balancePayment}}（{{currentLanguageTexts.balance}}${{ member.nowMoney }}）</view
                >
                <view class="font-size-sm" v-if="member.nowMoney == 0"
                  >{{currentLanguageTexts.insufficientBalance}}</view
                >
                <view
                  class="iconfont line-height-100 checkbox checked iconradio-button-on"
                  v-if="payType == 'yue'"
                >
                </view>
                <view
                  class="iconfont line-height-100 checkbox iconradio-button-off"
                  v-else
                ></view>
              </view>
            </list-cell>
            <list-cell last>
              <view
                class="d-flex align-items-center justify-content-between w-100"
                @click="setPayType('weixin')"
              >
                <view
                  class="iconfont iconwxpay line-height-100 payment-icon"
                  style="color: #7eb73a"
                ></view>
                <view class="flex-fill">{{currentLanguageTexts.wxPay}}</view>
                <view
                  class="iconfont line-height-100 checkbox checked iconradio-button-on"
                  v-if="payType == 'weixin'"
                >
                </view>
                <view
                  class="iconfont line-height-100 checkbox iconradio-button-off"
                  v-else
                ></view>
              </view>
            </list-cell>
            <list-cell>
              <view class="flex justify-center w-100">
                <view>
                  <uv-button
                    type="error"
                    :plain="true"
                    size="normal"
                    :text="currentLanguageTexts.immediatePayment"
                    @click="pay(orderData)"
                  ></uv-button>
                </view>
              </view>
            </list-cell>
          </view>
        </view>
      </uv-popup>
    </view>
    <view style="padding-bottom: 100rpx" v-else>
      <view class="bg-white">
        <view class="section">
          <!-- store info begin -->
          <list-cell :hover="false" v-if="orderData.orderType != 'desk'">
            <view class="w-100 d-flex align-items-center">
              <view class="d-flex flex-column w-60">
                <view
                  class="w-100 font-size-lg text-color-base text-truncate"
                  >{{ orderData.shop.name }}</view
                >
              </view>
              <view class="d-flex justify-content-end align-items-center w-40">
                <view
                  class="iconfont-yshop icon-mobile"
                  @click="makePhoneCall(orderData.shop)"
                  style="font-size: 45rpx; margin-right: 40rpx"
                ></view>
                <view
                  class="iconfont-yshop icon-location"
                  @click="openLocation(orderData.shop)"
                  style="font-size: 45rpx"
                ></view>
              </view>
            </view>
          </list-cell>
          <!-- store info end -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view
                class="flex justify-between desk-num mb-5"
                v-if="orderData.orderType == 'desk'"
              >
                <view> {{currentLanguageTexts.currentTableNumber}}:{{ orderData.deskNumber }}</view>
                <view>{{currentLanguageTexts.personNum}}:{{ orderData.deskPeople }}</view>
              </view>
              <!-- steps begin -->
              <view class="d-flex just-content-center">
                <view class="steps d-flex flex-column w-80">
                  <view class="steps__img-column">
                    <view class="steps__img-column-item">
                      <view class="iconfont-yshop icon-lamp"></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view class="iconfont-yshop icon-daojishi"></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view class="iconfont-yshop icon-doorbell"></view>
                    </view>
                  </view>
                  <view class="steps__text-column">
                    <view
                      class="steps__text-column-item"
                      :class="{ active: orderData.dueStatus == 1 }"
                    >
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                      <view class="steps__text-column-item-text">{{currentLanguageTexts.appointmentProgress}}</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item activ"
                      :class="{ active: orderData.dueStatus == 2 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">{{currentLanguageTexts.fourthStatusCancel}}</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item"
                      :class="{ active: orderData.dueStatus == 3 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text"> {{currentLanguageTexts.fourthStatusCompleted}} </view>
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                    </view>
                  </view>
                </view>
              </view>

              <!-- goods begin -->
              <view
                class="w-100 d-flex flex-column position-relative mt-30"
                style="margin-bottom: -40rpx"
              >
                <view class="w-100 d-flex align-items-center mb-40">
                  <view class="d-flex flex-column w-60 overflow-hidden">
                    <view
                      class="font-size-lg text-color-base mb-10 text-truncate"
                      >{{ orderData.appShopDeskVO.title }}</view
                    >
                    <view class="font-size-sm text-color-assist text-truncate"
                      >{{currentLanguageTexts.tableNumber}}:{{ orderData.appShopDeskVO.number }}</view
                    >
                  </view>
                  <view
                    class="d-flex w-40 align-items-center justify-content-between pl-30"
                  >
                    <view class="font-size-base text-color-base">x1</view>
                    <view
                      class="font-size-base text-color-base font-weight-bold"
                      >$0.00</view
                    >
                  </view>
                </view>
              </view>
              <!-- goods end -->
            </view>
          </list-cell>
        </view>
        <view class="section">
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>{{currentLanguageTexts.AppointedBy}}</view>
                <view class="font-weight-bold">{{ orderData.realName }}</view>
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.timeAppointment}}</view>
                <view class="font-weight-bold">{{
                  formatDateTime(orderData.dueTime)
                }}</view>
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.arrivalTime}}</view>
                <view class="font-weight-bold">{{ orderData.reachTime }}</view>
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.ReservedPhoneNumber}}</view>
                <view class="font-weight-bold">{{ orderData.deskNumber }}</view>
              </view>
              <view class="pay-cell">
                <view>{{currentLanguageTexts.ReservedPhoneNumber}}</view>
                <view class="font-weight-bold">{{ orderData.userPhone }}</view>
              </view>
            </view>
          </list-cell>
          <!-- payment and amount end -->
        </view>
        <view class="section">
          <!-- order info begin -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>{{currentLanguageTexts.orderTime}}</view>
                <view class="font-weight-bold">{{
                  formatDateTime(orderData.createTime)
                }}</view>
              </view>
              <!-- 	<view class="pay-cell">
								<view>下单门店</view>
								<view class="font-weight-bold">{{ order.shop.name }}</view>
							</view> -->
              <view class="pay-cell">
                <view>{{currentLanguageTexts.orderNo}}</view>
                <view class="font-weight-bold">{{ orderData.orderId }}</view>
              </view>
            </view>
          </list-cell>
          <!-- order info end -->
        </view>
        <!-- order other info begin -->
        <list-cell
          :hover="false"
          padding="50rpx 30rpx 20rpx"
          last
          v-if="orderData.orderType != 'desk'"
        >
          <view class="w-100 d-flex flex-column">
            <view class="pay-cell">
              <view>{{currentLanguageTexts.enjoymentMethod}}</view>
              <view class="font-weight-bold">{{currentLanguageTexts.appointmentRestaurant}}</view>
            </view>
            <view class="pay-cell">
              <view>{{currentLanguageTexts.notes}}</view>
              <view class="font-weight-bold">{{
                orderData.remark ? orderData.remark : currentLanguageTexts.noData
              }}</view>
            </view>
          </view>
        </list-cell>
        <!-- order other info end -->
      </view>
      <view class="fixed-bottom bg-white p-3">
        <view v-if="orderData.dueStatus == 1" class="flex justify-end">
          <view
            ><uv-button
              type="warning"
              :text="currentLanguageTexts.cancelDue"
              @click="cancelDueOrder(orderData)"
            ></uv-button
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { formatDateTime, isWeixin } from '@/utils/util';
import {
  orderDetail,
  orderReceive,
  payUnify,
  getWechatConfig,
  cancelDue,
  offPay,
} from '@/api/order';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
// #ifdef H5
import * as jweixin from 'weixin-js-sdk';
// #endif
const main = useMainStore();
const { member, isMer, currentLanguageTexts } = storeToRefs(main);

const title = ref(currentLanguageTexts.value.orderDetail);
const orderData = ref({
  shop: { name: '' },
  statusDto: { payType: '' },
});
const order = ref({});
const numForMading = ref(5);
const popup = ref();
const payType = ref('weixin'); // 付款方式
//const isMer = ref(0) //是否商家协助点餐

onLoad((option) => {
  if (option.isMer) {
    isMer.value = option.isMer;
    main.SET_MER(1);
    main.SET_UID_TYPE('admin');
  }
  detail(option.id);
});
const onClickBack = () => {
  const mypage = getCurrentPages();
  let length = mypage.length;
  if (length == 1) {
    uni.switchTab({
      url: '/pages/index/index',
    });
    return;
  }
  if (length > 1) {
    if (mypage[length - 2].route == 'pages/components/pages/pay/pay') {
      uni.switchTab({
        url: '/pages/menu/menu',
      });
      return;
    }
  }
  uni.navigateBack();
};
const detail = async (id) => {
  orderData.value = await orderDetail(id);
};
const openLocation = () => {
  let shop = orderData.value.shop;
  uni.openLocation({
    address: shop.addressMap + shop.address + ' ' + shop.name,
    latitude: parseFloat(shop.lat),
    longitude: parseFloat(shop.lng),
    fail(res) {},
  });
};
const makePhoneCall = () => {
  let shop = orderData.value.shop;
  uni.makePhoneCall({
    phoneNumber: shop.mobile,
    fail(res) {},
  });
};

// 确认收到货
const receive = async (order) => {
  let data = await orderReceive({ uni: order.orderId });
  if (data) {
    await detail(order.orderId);
  }
};

const cancelDueOrder = async (order) => {
  let data = await cancelDue({ id: order.id });
  if (data) {
    await detail(order.orderId);
  }
};

const offPayOrder = async (order) => {
  let data = await offPay({ id: order.id });
  if (data) {
    await detail(order.orderId);
  }
};

//提交退款
const refund = (order) => {
  uni.navigateTo({
    url:
      '/pages/components/pages/orders/refund?orderId=' +
      order.orderId +
      '&payPrice=' +
      order.payPrice +
      '&totalPrice=' +
      order.totalPrice,
  });
};

//加餐
const addFood = (order) => {
  main.SET_DESK({
    id: order.deskId,
    number: order.deskNumber,
    shopId: order.shopId,
    people: order.deskPeople,
    orderId: order.orderId,
  });
  main.SET_ORDER_TYPE('desk');
  main.SET_STORE(order.shop);
  uni.switchTab({
    url: '/pages/menu/menu',
  });
};
const goPay = () => {
  popup.value.open();
};
const pay = async (order) => {
  if (payType.value == 'weixin') {
    // 微信支付
    weixinPay(order);
  } else if (payType.value == 'yue') {
    // 余额支付
    balancePay(order);
  }
};

// 更改支付方式
const setPayType = (paytype) => {
  payType.value = 'weixin';
  payType.value = paytype;
  uni.setStorage({
    key: 'paytype',
    data: paytype,
  });
};

const balancePay = async (order) => {
  let from = 'routine';
  // #ifdef H5
  from = 'h5';
  // #endif
  let pay = await payUnify({
    uni: order.orderId,
    from: from,
    paytype: 'yue',
  });

  uni.hideLoading();
  if (!pay) {
    return;
  }

  uni.removeStorageSync('cart');
  popup.value.close();
  detail(order.orderId);
};
const weixinPay = async (order) => {
  let from = 'routine';
  // #ifdef H5
  from = 'h5';
  if (isWeixin()) {
    from = 'wechat';
  }

  // #endif
  //let that = this;
  let data = await payUnify({
    uni: order.orderId,
    from: from,
    paytype: 'weixin',
  });
  if (!data) {
    uni.hideLoading();
    return;
  }
  if (data.trade_type == 'MWEB') {
    // #ifdef H5
    // 微信外的H5
    location.href = data.data;
    // #endif
  } else if (data.trade_type == 'JSAPI') {
    // #ifdef MP-WEIXIN
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: data.data.timeStamp,
      nonceStr: data.data.nonceStr,
      package: data.data.package,
      signType: 'MD5',
      paySign: data.data.paySign,
      success: function (res) {
        uni.removeStorageSync('cart');
        popup.value.close();
        detail(order.orderId);
        // uni.switchTab({
        // 	url: '/pages/order/order'
        // });
      },
      fail: function (err) {},
    });
    // #endif
  } else if (data.trade_type == 'W-JSAPI') {
    //公众号支付
    let config = await getWechatConfig();
    if (config) {
      jweixin.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: ['chooseWXPay'],
      });
      jweixin.ready(function () {
        jweixin.chooseWXPay({
          timestamp: data.data.timeStamp,
          nonceStr: data.data.nonceStr,
          package: data.data.package,
          signType: 'MD5',
          paySign: data.data.paySign,
          success: function (res) {
            uni.removeStorageSync('cart');
            popup.value.close();
            detail(order.orderId);
            // uni.switchTab({
            //  url: '/pages/order/order'
            // });
          },
          fail: function (err) {},
        });
      });
      jweixin.error(function (res) {});
    } else {
      //console.log(res)
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-list {
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
  min-height: 1vh;
  max-height: 60vh;
}
.image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
  border-radius: 8rpx;
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-base;
  color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.desk-num {
  font-size: 30rpx;
  font-weight: bold;
  color: $text-color-base;
}

.sort-num {
  font-size: 64rpx;
  font-weight: bold;
  color: $text-color-base;
  line-height: 2;
}

.invote-box {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 30rpx;
    height: 30rpx;
  }
}

.btn-box {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 11;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 10rpx;
    flex: 1;
    flex-shrink: 0;

    button {
      width: 100%;
      border-radius: 50rem !important;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
  }
}

.payment {
  margin-bottom: 30rpx;

  .disabled {
    color: $text-color-grey;
  }

  .payment-icon {
    font-size: 44rpx;
    margin-right: 10rpx;
  }

  .checkbox {
    font-size: 36rpx;
    margin-left: 10rpx;
  }

  .checked {
    color: $color-primary;
  }
}

/* #ifdef H5 */
page {
  min-height: 100%;
  background-color: $bg-color;
}
/* #endif */
.order-box {
  padding: 20rpx;
  /* #ifdef H5 */
  margin-bottom: 100rpx;
  /* #endif */
}

.drinks-img {
  width: 260rpx;
  height: 260rpx;
}

.tips {
  margin: 60rpx 0 80rpx;
  line-height: 48rpx;
}

.drink-btn {
  width: 320rpx;
  border-radius: 50rem !important;
  margin-bottom: 40rpx;
  font-size: $font-size-base;
  line-height: 3;
}

@mixin arch {
  content: '';
  position: absolute;
  background-color: $bg-color;
  width: 30rpx;
  height: 30rpx;
  bottom: -15rpx;
  z-index: 10;
  border-radius: 100%;
}

.section {
  position: relative;

  &::before {
    @include arch;
    left: -15rpx;
  }

  &::after {
    @include arch;
    right: -15rpx;
  }
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-base;
  color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.steps__img-column {
  display: flex;
  margin: 30rpx 0;

  .steps__img-column-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 80rpx;
      height: 80rpx;
    }
    .unactive {
      color: #919293;
    }
  }
}

.steps__text-column {
  display: flex;
  margin-bottom: 40rpx;

  .steps__text-column-item {
    flex: 1;
    display: inline-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-base;
    color: $text-color-assist;

    &.active {
      color: $text-color-base;
      font-weight: bold;

      .steps__column-item-line {
        background-color: $text-color-base;
      }
    }

    .steps__column-item-line {
      flex: 1;
      height: 2rpx;
      background-color: #919293;
      transform: scaleY(0.5);
    }

    .steps__text-column-item-text {
      margin: 0 8px;
    }
  }
}
.icon-lamp,
.icon-daojishi,
.icon-takeout,
.icon-doorbell {
  font-size: 60rpx;
}
.iconfont-yshop {
  color: $color-primary;
}
</style>
